<template>
   <div>
    <!-- 专题页 -->
    <div v-for="(item,index) in data " :key="index" class="top">
        <img :src="item.scene_pic_url" alt="" width="100%">
         <h2>{{item.title}}</h2>
         <h4>{{item.subtitle}}</h4>
         <p>{{item.price_info | price}}</p>
    </div>
    <van-pagination v-model="currentPage" :page-count="2" mode="simple" @change="show()"/>

    <div class="bo">

    </div>
   </div>
</template>

<script>
import {Gettopiclist} from "../request/api.js"
export default {
   data () {
    return {
        currentPage:1,
        data:[]
    }
   },
   methods: {
    //  再次点击切换页面
     show(){
      Gettopiclist({page:this.currentPage,size:10})
      .then(res=>{
        this.data=res.data.data  
        document.documentElement.scrollTop = 0
      })
      .catch(err=>{
        
      })
     }
   },
   created(){
    //使用接口接收数据 并传递参数
    Gettopiclist({page:1,size:10})
    .then(res=>{
    //   console.log(res);
      this.data=res.data.data
    //   console.log(this.data);
        
    })
    .catch(err=>{
       
    })
   },
   //过滤器
    filters: {
        price(v) {
        return "¥" + v.toFixed(2) + "元起";
        },
    }
}
</script>

<style lang="less" scoped>
 .top{
    background-color: #fff;
    margin-bottom: 0.2rem;
    text-align: center;
    line-height: 0.3rem;
    h2{
        font-size: larger;
    }
    h4{
      white-space: nowrap; 
      overflow: hidden;
      text-overflow: ellipsis;
    }
    p{
        color: #9B0000;
        font-size: small;
    }
 }
 .bo{
    height: 1rem;
 }
</style>